<template>
    <!-- 利用ref 和 $refs 可以用于获取dom元素，或组件实例 -->
    <!-- 特点：查找范围 -> 当前组件内(更精确稳定)-->

    <!-- 目标标签 -> 添加ref 属性 -->
    <div class="base-chart-box" ref="myChart">子组件</div>
  </template>
  
  <script>
  // yarn add echarts 或者 npm i echarts
//   引入echarts
  import * as echarts from 'echarts'
  
  export default {
    mounted() {
      // 基于准备好的dom，初始化echarts实例
    //   恰当史记，通过this.$refs.属性名，获取目标标签
      var myChart = echarts.init(this.$refs.myChart)
      // 绘制图表
      myChart.setOption({
        title: {
          text: 'ECharts 入门示例',
        },
        tooltip: {},
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'],
        },
        yAxis: {},
        series: [
          {
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20],
          },
        ],
      })
    },
  }
  </script>
  
  <style scoped>
  .base-chart-box {
    width: 400px;
    height: 300px;
    border: 3px solid #000;
    border-radius: 6px;
  }
  </style>